<template>
  <div class="view">
    <el-row class="handle-box" :model="filters">
      <el-col :span="10">
        <el-button
          class="jianbianbule"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          >{{ $t("areacon.area") }}</el-button
        >
      </el-col>
      <el-col :span="14" style="text-align: right;">
        <span>{{ $t("areacon.importantMan") }}：</span>
        <el-input
          v-model="filters.ImportantMan"
          @keyup.native.enter="search"
          :placeholder="$t('public.text')"
          clearable
        ></el-input>
        <el-button type="primary" class="seacthsbtn" id="btn" @click="search" icon="el-icon-search">{{$t("public.search")}}</el-button>
      </el-col>
    </el-row>
    <div class="tablebox">
    <template>
      <el-table :data="tables" size="mini" stripe class="tablefisbox">
        <el-table-column type="index" :label="$t('public.number')" width="80">
        </el-table-column>
        <el-table-column prop="areaName" :label="$t('areacon.areaName')">
        </el-table-column>
        <el-table-column prop="shortEnName" :label="$t('areacon.shortEnName')" width="180">
        </el-table-column>
        <el-table-column prop="importantMan" :label="$t('areacon.importantMan')">
        </el-table-column>
        <el-table-column prop="remark" :label="$t('public.remark')"> </el-table-column>
        <el-table-column prop="sort" :label="$t('areacon.sort')"> </el-table-column>
        <el-table-column prop="createUser" :label="$t('public.createUser')"></el-table-column>
        <el-table-column
          prop="createTime"
          :label="$t('public.createTime')"
          :formatter="carTimeFilter"
        >
        </el-table-column>
        <el-table-column :label="$t('public.operation')" width="250">
          <template slot-scope="scope">
            <el-button
              type="warning"
              icon="el-icon-edit"
              round
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >{{ $t("public.edit") }}</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              round
              size="mini"
              @click="handleDel(scope.$index, scope.row)"
              >{{ $t("public.del") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--工具条-->
    <el-col class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageSize"
        :total="total"
      >
      </el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item :label="$t('areacon.areaName')" prop="areaName">
          <el-input v-model="editForm.areaName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('areacon.shortEnName')" prop="shortEnName">
          <el-input v-model="editForm.shortEnName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('areacon.importantMan')" prop="importantMan">
          <el-input v-model="editForm.importantMan"></el-input>
        </el-form-item>
        <el-form-item :label="$t('areacon.sort')" prop="sort">
          <el-input
            oninput="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"
            v-model="editForm.sort"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.remark')" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2 }"
            v-model="editForm.remark"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false" type="success">{{
          $t("public.cancelbtn")
        }}</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          @click="createData"
          >{{ $t("public.savebtn") }}</el-button
        >
        <el-button v-else type="primary" @click="updateData">{{
          $t("public.changebtn")
        }}</el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogStatus: "", //编辑框界面切换
      textMap: {
        //添加与编辑界面
        update: this.$t('public.edit'),
        create: this.$t('public.create')
      },
      dialogFormVisible: false, //弹窗
      filters: {
        ImportantMan: "",
      },
      tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      //是否必填项
      editFormRules: {
        areaName: [
          { required: true, message: "请输入区域名称", trigger: "blur" },
        ],
        shortEnName: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输排序号", trigger: "blur" }],
      },
      //编辑界面数据
      editForm: {
        areaName: "",
        shortEnName: "",
        importantMan: "",
        sort: "",
        remark: "",
      },
    };
  },
  watch: {
    "filters.ImportantMan"(val) {
      if (val.trim() === "") {
        this.getArea();
      }
    },
  },
  mounted() {
    this.getArea();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getArea();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getArea();
    },
    //编辑参数
    handleEdit(index, row) {
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.editForm = {
        areaId: row.areaId,
        areaName: row.areaName,
        shortEnName: row.shortEnName,
        importantMan: row.importantMan,
        sort: row.sort,
        remark: row.remark,
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //新增参数
    handleAdd() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.editForm = {
        areaName: "",
        shortEnName: "",
        importantMan: "",
        sort: "",
        remark: "",
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getArea();
    },
    //获取
    async getArea() {
      try {
        let params = {
          ImportantMan: this.filters.ImportantMan,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.set.getArea(params);
        this.total = res.count;
        this.tables = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    //添加
    createData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.set.addArea(params);
          if (res.code == 200) {
            this.$message({
              message: this.$t("public.addsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false; //关闭弹窗
            this.getArea(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //修改
    updateData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.set.editArea(params);
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: this.$t("public.editsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false;
            this.getArea(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除
    handleDel(index, row) {
      // 二次确认删除
      this.$confirm(
        this.$t("public.confirmcontent"),
        this.$t("public.confirmtitle"),
        {
          type: "warning",
        }
      )
        .then(async () => {
          let params = {
            id: row.areaId,
            usid: JSON.parse(this.$store.state.userInfo).uid,
          };
          let res = await this.$api.set.removeArea(params);
          if (res.code == 200) {
            this.$message.success(this.$t("public.confirmtips1"));
            this.getArea(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {});
    },
    carTimeFilter(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        return this.$moment(daterc).format("YYYY-MM-DD HH:mm:ss");
      }
    },
  },
};
</script>